<template>
  <!--  公路档案页面-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree
          v-model="deptTree"
          ref="deptTree"
          :changeOnSelect="true"
          placeholder="选择管养单位"
          @change="selectOrgHandel"
        ></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                @click.native="breadClick(item.deptTreeIdList)"
                v-for="item in deptTree.breadList"
                :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName }}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>

          <!-- 条件筛选 -->
          <div class="page_filter">
            <el-input v-model="form.queryString" clearable placeholder="输入名称或编号可查询" style="width:350px">
              <template slot="prepend">桥梁编号/名称</template>
            </el-input>
            <el-select v-model="form.bridgeLevel" :disabled="isEdit" filterable clearable
                       placeholder="选择桥梁评定等级">
              <el-option
                v-for="item in EnumBridgeLevelList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-autocomplete
              v-model="state"
              clearable
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入路线名称或编号"
              @change="handleChange"
              @select="handleSelect"
            ></el-autocomplete>
<!--            <el-select v-model="form.roadId" filterable clearable placeholder="选择路线" @change="changeRoad">-->
<!--              <el-option-->
<!--                v-for="item in deptRoadList"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id">-->
<!--              </el-option>-->
<!--            </el-select>-->
            <el-button
              class="common_btn-defalut"
              icon="el-icon-search"
              @click="form.page = 1;queryList();">搜索
            </el-button>
          </div>
          <div class="page_main">
            <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">新增桥梁档案</el-button>
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <el-table :data="tableList" border>
              <el-table-column label="序号" fixed width="80">
                <template slot-scope="scope">
                  {{ getIndex(scope.$index) }}
                </template>
              </el-table-column>
              <el-table-column prop="bridgeNo" width="180" label="桥梁编号"></el-table-column>
              <el-table-column prop="name" min-width="140" show-overflow-tooltip label="桥梁名称"></el-table-column>
              <el-table-column prop="length" width="100" label="桥梁长度">
                <template slot-scope="scope">
                  {{ scope.row.length }}m
                </template>
              </el-table-column>
              <el-table-column prop="roadName" width="180" label="所属路线"></el-table-column>
              <el-table-column prop="deptTreeName" min-width="180" show-overflow-tooltip label="管养单位"></el-table-column>
              <el-table-column prop="updateTime" width="180" label="更新时间">
                <template slot-scope="scope">
                  {{scope.row.updateTime | formatTimer2 }}
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" :width="hasPermission('road:bridgeInfo:del')?190:150">
                <template slot-scope="scope">
                  <button class="btn_add" @click="checkDetails(scope.row)">
                    查看详情
                  </button>
                  <button class="btn_edit" @click="handleEdit(scope.row)">
                    编辑
                  </button>
                  <el-popconfirm v-if="hasPermission('road:bridgeInfo:del')" confirmButtonText='好的'
                                 cancelButtonText='不用了' icon="" title="确定删除该桥梁吗？" @confirm="handleDelete(scope.row.id)">
                    <button slot="reference" class="btn_delete">删除</button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
                 :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
              :total="form.total">
            </el-pagination>
          </div>
          <el-drawer
            :title="dialogTitle"
            v-if="isShowAddDialog"
            :visible.sync="isShowAddDialog"
            :close-on-click-modal="false"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
            size="70%">
            <div class="demo-drawer__content" style="height: 70%!important;overflow-y: auto;margin-top: 3%;box-sizing: border-box;padding-right:3%">
              <el-form ref="form" label-position="right" :rules="rules" :model="currentRow" label-suffix="："
                       label-width="140px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="管养单位" prop="deptTreeId">
                      <organization v-model="currentRow.deptTreeId" :disabled="isEdit" placeholder="选择管养单位"
                                    @change="changeDept"></organization>
                    </el-form-item>

                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="路线" prop="roadId">
                      <el-select v-model="currentRow.roadId" :disabled="isEdit" filterable clearable placeholder="选择路线">
                        <el-option
                          v-for="item in deptRoadList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="base-end">
                  <el-col :span="12">
                    <el-form-item label="桥梁名称" prop="name">
                      <el-input :disabled="isEdit" v-model="currentRow.name" placeholder="输入桥梁名称">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="桥梁编号" prop="bridgeNo;">
                      <el-input :disabled="isEdit" v-model="currentRow.bridgeNo" placeholder="输入桥梁编号">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="base-end">
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="中心桩号" prop="pointBig;">
                          <el-input :disabled="isEdit" v-model.trim="currentRow.pointBig" type="number"
                                    placeholder="输入数字">
                            <template slot="prepend">K</template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label-width="0px" prop="pointSmall;">
                          <el-input :disabled="isEdit" v-model.trim="currentRow.pointSmall" type="number" :maxlength="3"
                                    placeholder="输入数字">
                            <template slot="prepend"><span style="font-size: 15px">KM+</span></template>
                            <template slot="append"><span style="font-size: 15px">M</span></template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="14">
                        <el-form-item label="桥梁经纬度" prop="longitude;">
                          <el-input :disabled="isEdit" v-model.trim="currentRow.longitude" type="number"
                                    placeholder="输入经度"
                                    :maxlength="10">
                            <template slot="prepend"><span style="font-size: 15px">经度:</span></template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="10">
                        <el-form-item label-width="0px" prop="latitude">
                          <el-input :disabled="isEdit" v-model.trim="currentRow.latitude" type="number"
                                    placeholder="输入纬度" :maxlength="10">
                            <template slot="prepend"><span style="font-size: 15px">纬度:</span></template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <el-row class="base-end">
                  <el-col :span="12">
                    <el-col :span="12">
                      <el-form-item label="桥梁全长" prop="length">
                        <el-input :disabled="isEdit" v-model.trim="currentRow.length" type="number"
                                  placeholder="输入桥梁全长(m)"
                                  :maxlength="10">
                          <template slot="append"><span style="font-size: 11px">m</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="跨径总长" label-width="90px" prop="bridgeLength">
                        <el-input :disabled="isEdit" v-model.trim="currentRow.bridgeLength" type="number"
                                  placeholder="输入跨径总长"
                                  :maxlength="10">
                          <template slot="append"><span style="font-size: 11px">m</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>

                  </el-col>
                  <el-col :span="12">
                    <el-col :span="12">
                      <el-form-item label="跨径组合" prop="groupType">
                        <el-input :disabled="isEdit" v-model="currentRow.groupType" placeholder="输入跨径组合">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="单孔最大跨径" prop="holeLength">
                        <el-input :disabled="isEdit" v-model.trim="currentRow.holeLength" type="number"
                                  placeholder="输入单孔最大跨径"
                                  :maxlength="10">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-col :span="12">
                      <el-form-item label="桥梁全宽" prop="width">
                        <el-input :disabled="isEdit" v-model.trim="currentRow.width" type="number"
                                  placeholder="输入桥梁全宽" :maxlength="10">
                          <template slot="append"><span style="font-size: 15px">m</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label-width="90px" label="桥面净宽" prop="bridgeWidth">
                        <el-input :disabled="isEdit" v-model.trim="currentRow.bridgeWidth" type="number"
                                  placeholder="输入桥梁全宽"
                                  :maxlength="10">
                          <template slot="append"><span style="font-size: 15px">m</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-col>
                  <el-col :span="12">
                    <el-col :span="12">
                      <el-form-item label="建设时间" prop="buildTime">
                        <el-date-picker :disabled="isEdit"
                                        v-model="currentRow.buildTime"
                                        type="date"
                                        style="width:167px;"
                                        placeholder="选择日期"
                                        align="right">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="改建时间" prop="changeTime" >
                        <el-date-picker :disabled="isEdit"
                                        style="width:167px"
                                        v-model="currentRow.changeTime"
                                        type="date"
                                        placeholder="选择日期"
                                        align="right">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row class="base-end">
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="墩台防撞设施类型" prop="bridgeProtect">
                          <el-select v-model="currentRow.bridgeProtect" :disabled="isEdit" filterable clearable
                                     placeholder="选择墩台防撞设施类型">
                            <el-option
                              v-for="item in EnumBridgeProtectList"
                              :key="item.code"
                              :label="item.name"
                              :value="item.code">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label-width="120px" label="桥梁评定等级" prop="bridgeLevel">
                          <el-select v-model="currentRow.bridgeLevel" :disabled="isEdit" filterable clearable
                                     placeholder="选择桥梁评定等级">
                            <el-option
                              v-for="item in EnumBridgeLevelList"
                              :key="item.code"
                              :label="item.name"
                              :value="item.code">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="设计荷载等级" prop="bridgeWeightType">
                          <el-select v-model="currentRow.bridgeWeightType" :disabled="isEdit" filterable
                                     clearable
                                     placeholder="选择设计荷载等级">
                            <el-option
                              v-for="item in EnumBridgeWeightTypeList"
                              :key="item.code"
                              :label="item.name"
                              :value="item.code">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label-width="120px" label="抗震设防等级" prop="kangZhenLevel">
                          <el-select v-model="currentRow.kangZhenLevel" :disabled="isEdit" filterable clearable
                                     placeholder="选择抗震设防等级">
                            <el-option
                              v-for="item in EnumKangZhenLevelList"
                              :key="item.code"
                              :label="item.name"
                              :value="item.code">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>

                <el-row class="base-end">
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="按跨径分类" prop="bridgeLengthType">
                          <el-select v-model="currentRow.bridgeLengthType" :disabled="isEdit" filterable clearable
                                     placeholder="选择按跨径分类">
                            <el-option
                              v-for="item in EnumBridgeLengthTypeList"
                              :key="item.code"
                              :label="item.name"
                              :value="item.code">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="通航等级" label-width="90px" prop="bridgeCrossLevel">
                          <el-select v-model="currentRow.bridgeCrossLevel" :disabled="isEdit" filterable clearable
                                     placeholder="选择通航等级">
                            <el-option
                              v-for="item in EnumBridgeCrossLevelList"
                              :key="item.code"
                              :label="item.name"
                              :value="item.code">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="主桥上部结构类型" prop="bridgeStructure">
                      <el-select v-model="currentRow.bridgeStructure" :disabled="isEdit" filterable clearable
                                 placeholder="选择主桥上部结构类型">
                        <el-option
                          v-for="item in EnumBridgeStructureList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="currentRow.bridgeOverType==9?18:24">
                    <el-form-item label="跨越地物类型" prop="bridgeOverType">
                      <el-radio-group v-model="currentRow.bridgeOverType" size="mini">
                        <el-radio-button    v-for="item in EnumBridgeOverTypeList" :disabled="isEdit" :key="item.code" :label="item.code">{{item.name}}
                        </el-radio-button>
                      </el-radio-group>

                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="currentRow.bridgeOverType==9">
                    <el-form-item label="其他" label-width="90px" prop="bridgeOverOther">
                      <el-input :disabled="isEdit" v-model="currentRow.bridgeOverOther" placeholder="输入跨越地物其他">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="currentRow.bridgeStructureType==11?18:24">
                    <el-form-item label="主桥上部结构材料" prop="bridgeOverType">
                      <el-radio-group v-model="currentRow.bridgeStructureType"  size="mini">
                        <el-radio-button v-for="item in EnumBridgeStructureTypeList" :disabled="isEdit" :key="item.code" :label="item.code">{{item.name}}
                        </el-radio-button>
                      </el-radio-group>

                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="currentRow.bridgeStructureType==11">
                    <el-form-item label="其他" label-width="90px" prop="bridgeStructureTypeOther">
                      <el-input :disabled="isEdit" v-model="currentRow.bridgeStructureTypeOther"
                                placeholder="输入主桥上部结构材料其他">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="currentRow.bridgePieceType==16?18:24">
                    <el-form-item label="桥墩类型" prop="bridgePieceType">
                      <el-radio-group v-model="currentRow.bridgePieceType"  size="mini">
                        <el-radio-button v-for="item in EnumBridgePieceTypeList" :disabled="isEdit" :key="item.code" :label="item.code">{{item.name}}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="currentRow.bridgePieceType==16">
                    <el-form-item label="其他" label-width="90px" prop="bridgePieceTypeOther">
                      <el-input :disabled="isEdit" v-model="currentRow.bridgePieceTypeOther" placeholder="输入桥墩类型其他">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="currentRow.fangHongBiaoZhun==6?18:24">
                    <el-form-item label="防洪标准" prop="bridgeOverType">
                      <el-radio-group v-model="currentRow.fangHongBiaoZhun"  size="mini">
                        <el-radio-button v-for="item in EnumFangHongBiaoZhunList" :disabled="isEdit" :key="item.code" :label="item.code">{{item.name}}
                        </el-radio-button>
                      </el-radio-group>
                      <!--                          <el-select v-model="currentRow.fangHongBiaoZhun" :disabled="isEdit" filterable clearable-->
                      <!--                                     @change="changeOver('fangHongOther')" placeholder="选择防洪标准">-->
                      <!--                            <el-option-->
                      <!--                              v-for="item in EnumFangHongBiaoZhunList"-->
                      <!--                              :key="item.code"-->
                      <!--                              :label="item.name"-->
                      <!--                              :value="item.code">-->
                      <!--                            </el-option>-->
                      <!--                          </el-select>-->
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="currentRow.fangHongBiaoZhun==6">
                    <el-form-item label="其他" label-width="90px" prop="fangHongOther">
                      <el-input :disabled="isEdit" v-model="currentRow.fangHongOther" placeholder="输入防洪标准其他">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="其他需要说明的信息" prop="explanation" label-width="160px">
                      <el-input :disabled="isEdit" type="textarea" :rows="5" v-model="currentRow.explanation"
                                placeholder="输入其他需要说明的信息">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="照片" prop="picList">
                  <upload-img :disabled="isEdit" v-model="currentRow.picList" :limit="3" :size-limit="3"
                              ref="uploadPic"></upload-img>
                </el-form-item>
              </el-form>
            </div>
            <div class="demo-drawer__footer" style="width: 100%;text-align: right;bottom: 12px" v-if="!isEdit">
              <el-button class="common_btn-white" type="info" @click="isShowAddDialog = false">取消</el-button>
              <el-button class="common_btn-defalut" type="primary" @click="validateForm">提交档案</el-button>
            </div>
          </el-drawer>
          <!-- 编辑新增弹窗 -->

          <x-loading v-show="isLoading"></x-loading>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import UploadImg from '@/components/upload-img'
  import XLoading from '@/components/animation/x-loading.vue'
  import OrganizationTree from "@/components/organization-tree/all";
  import Organization from '@/components/organization-unit/all'
  import {
    bridgeAdd,
    bridgeDelete,
    getBridgeList,
    bridgeUpdate
  } from "@/services/model/bridge-info";
  import ItemMixins from "./slope-modules/item.mixins";
  import Permission from '@/utils/permission'
  import Enums from '@/utils/enums'

  export default {
    components: {
      UploadImg,
      Organization,
      OrganizationTree,
      XLoading
    },
    mixins: [ItemMixins,Enums],
    data() {
      return {
        restaurants:[],
        state: '',
        timeout:  null,
        EnumFangHongBiaoZhunList: [],
        EnumKangZhenLevelList: [],
        EnumBridgeWeightTypeList: [],
        EnumBridgeLevelList: [],
        EnumBridgeProtectList: [],
        EnumBridgeLengthTypeList: [],
        EnumBridgeOverTypeList: [],
        EnumBridgeCrossLevelList: [],
        EnumBridgeStructureList: [],
        EnumBridgeStructureTypeList: [],
        chartsName: ['echartsOneChange', 'echartsTwoChange', 'echartsThreeChange'],
        deptTree: {
          breadList: [], //面包屑
          deptTreeId: "",
        },
        // 接口正在加载
        isLoading: false,

        slopeTypeList: [],
        tableList: [],
        isShowAddDialog: false,
        isEdit: false,
        form: {
          page: 1,
          pageSize: 10,
          roadId: "",
          slopeType: "",
          flag: 0,
        },
        deptRoadList: [],
        currentRow: {},
        rules: {
          userName: {required: true, message: "请输入负责人姓名"},
          address: {required: true, message: "请输入详细地址"},
          platformName: {required: true, message: "请输入单位名称"},
          platformType: {
            required: true,
            message: "请选择平台类型",
            trigger: "change",
          },
          phone: {required: true, validator: "请输入联系电话"},
        },
      };
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return this.currentRow.id ? "编辑桥梁档案" : "新增桥梁档案";
      },
      isEditStatus() {
        return !!this.currentRow.id;
      },
    },
    methods: {
      //选择不为其他，输入框情况
      changeOver(name) {
        if (name == 'bridgeOverOther') {
          this.currentRow.bridgeOverOther == ''
        } else if (name === 'fangHongOther') {
          this.currentRow.fangHongOther == ''
        }
      },

      // 判断权限
      hasPermission(permissionStr) {
        return Permission(this.$store.state.userInfo, permissionStr)
      },
      //删除
      async handleDelete(id) {
        let res = await bridgeDelete({id: id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '桥梁删除成功'
          })
        }
        this.queryList()
      },

      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId);
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate();
        this.form.deptTreeId = this.deptTree.deptTreeId;
        this.queryList();
        this.changeDept();
      },// 模糊搜索路线
      querySearchAsync(queryString, cb) {
        var restaurants
        if(!queryString){
          restaurants = [];
        }else {
          restaurants = this.restaurants;

        }
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 10 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >-1);
        };
      },
      handleSelect(item) {
        this.form.roadId=item.id
        this.changeRoad()
      },
      handleChange(item){
        if(item==''){
          this.form.roadId=''
        }
      },
      //获取路线列表
      async changeDept() {
        this.deptRoadList = await this.getRoadListByDept(this.form.deptTreeId);
        let data=[]
        this.deptRoadList.map(x=>{
          data.push({
            id:x.id,
            value:x.name,
            name:x.name
          })
        })
        this.restaurants=data
      },
      // 查看详情
      checkDetails(row) {
        this.currentRow = JSON.parse(JSON.stringify(row));
        this.activeName = "base";
        this.isEdit = true;
        this.isShowAddDialog = true;

      },
      /**
       * row  当前操作行的对象
       */
      // 编辑
      handleEdit(row) {
        this.currentRow = JSON.parse(JSON.stringify(row));
        this.isEdit = false;
        this.isShowAddDialog = true;
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1;
        return param;
      },
      // 新增数据
      handleAdd() {
        this.currentRow = {}
        this.isShowAddDialog = true;
        this.isEdit = false;
      },
      async queryList() {
        this.isLoading = true
        // 由于在前端进行过滤，所以name不能传到后端
        let res = await getBridgeList(this.form);
        this.tableList = res.data?.records || [];
        this.form.page = Number(res.data?.current);
        this.form.total = Number(res.data?.total);
        this.isLoading = false
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val;
        this.queryList();
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val;
        this.queryList();
      },
      // 表单提交
      validateForm(name) {
        this.submitData();
      },
      //选择路线
      changeRoad() {
        this.form.roadSectionId = "";
        this.bidSectionList = [];
        const {roadId} = this.form;
        this.getBidSectionList(roadId);
      },
      // 新增编辑提交数据
      async submitData() {
        // 根据ID判断使用新增还是编辑
        let action = this.currentRow.id ? bridgeUpdate : bridgeAdd;
        let res = await action(this.currentRow);
        if (res.code === 200) {
          this.$notify({
            type: "success",
            title: "提示",
            message: this.currentRow.id ? "修改成功" : "添加成功",
          });
          this.queryList();
          this.isShowAddDialog = false;
        }
        return res;
      },
    },

    activated() {
    },
    filters: {},
    mounted() {
      this.queryList();
      this.queryDictList(['EnumBridgeStructureType', 'EnumBridgeStructure', 'EnumBridgeCrossLevel', 'EnumBridgeOverType', 'EnumBridgeLengthType', 'EnumFangHongBiaoZhun', 'EnumKangZhenLevel', 'EnumBridgeWeightType', 'EnumBridgePieceType', 'EnumBridgeLevel', 'EnumBridgeProtect'],
        ['EnumBridgeStructureTypeList', 'EnumBridgeStructureList', 'EnumBridgeCrossLevelList', 'EnumBridgeOverTypeList', 'EnumBridgeLengthTypeList', 'EnumFangHongBiaoZhunList', 'EnumKangZhenLevelList', 'EnumBridgeWeightTypeList', 'EnumBridgePieceTypeList', 'EnumBridgeLevelList', 'EnumBridgeProtectList']);
    },
  };
</script>

<style scoped="scoped" lang="less">
  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        padding: 10px 20px;
      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    font-weight: 600;
  }

  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
    font-weight: 600;
  }

  .el-tabs__item {
    font-size: 20px;
    line-height: 45px;
    height: 45px;
  }

  .tabs_view {
    // background: red;
    // margin-top: 0 !important;
    /deep/ .el-step.is-simple .el-step__title {
      font-size: 15px;
      line-height: 20px;
    }

    .el-steps {
      margin-bottom: 10px;
      // background: red;
      background: transparent;
      // color: red !important;
      margin-right: 10px;
    }
  }

  /deep/ .el-step__title {
    // background: red;
    width: 100%;
    // color: ;
    font-size: 12px !important;
  }

  /deep/ .is-process {
    color: #1990FE;
    font-size: 110% !important;
    font-weight: 700;

    .el-step__icon {
      border: #1990FE 2px solid;
    }
  }

  .button-foot {
    width: 100%;
    margin-top: 20px;
    height: 150px;
    text-align: center;

    .el-button {
      text-align: center;
      background: #1990FE;
      color: white;
      border: none;
    }
  }

  .el-dialog {
    .dialogEmpower {
      min-height: 150px;
      width: 100% !important;
      overflow: hidden !important;
    }

    .dialogAdd {
      width: 100%;
      // height: 500px;
      // background: red !important;
      overflow: auto;

      .dialogCard {
        background: transparent;
        border: none;
      }

      .el-card {
        // background: transparent !important;
      }

      .box_wrap {

        /deep/ .el-form {
          // background: yellow;
          /*height: 500px !important;*/
        }
      }
    }
  }

  // 设置滚动条

  .dialogAdd::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }

  .dialogAdd::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: #1990FE;
  }

  .dialogAdd::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
  }

  // 弹窗里面颜色
  .el-tabs--border-card {
    // background: transparent;
    border: 1px solid black;
    box-shadow: -12px -12px 8px black !important;
  }

  // 新增弹窗
  /deep/ .el-steps--simple {
    // background: red ;
  }

  // 修改input框
  /deep/ .el-input__inner {
    // background: red !important;
    border: 1px solid #1990FE;
    border-radius: 0;
  }

  //修改input框上的按钮
  /deep/ .el-input-group__prepend {
    border-radius: 0;
    border: 1px solid #1990FE;
  }

  // 设置btn 样式
  /deep/ .el-button--default {
    background: #1990FE !important;
    border-radius: 0%;
  }

  // 设施查看栏 tab头部
  /deep/ .el-tabs__nav-wrap {
    background: transparent !important;

    .el-tabs__nav-scroll {
      background: transparent;

      .el-tabs__nav {
        // background: red;
        .el-tabs__item {
          background: transparent !important;
        }

        .is-active {
          background: #1990FE !important;
          color: white;
          font-size: 120%;
          font-weight: 600;
        }
      }
    }
  }

  // 设置单选框
  /deep/ .el-checkbox {
    // color: white !important;
  }

  /deep/ .geology-children {
    color: #1990FE !important;
  }

  /deep/ .geology-children-fanghu {
    color: #1990FE !important;

  }

  .common_btn-defalut {
    border-radius: 8px;
  }

</style>
